<template>
  <div class="login">
    <div class="main">
      <div class="modal">
        <div class="login-mode">密码登录</div>
        <el-form
          ref="loginForm" 
          :model="form" 
          :rules="rules" 
          status-icon 
          @keyup.enter.native="handleLogin"
          v-if="showChange === '忘记密码'"
          >
          <el-form-item prop="user_name">
            <el-input v-model="form.user_name" placeholder="输入您的账号">
              <template #prepend><i class="iconfont icon-user1"/></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="user_password">
            <el-input 
              type="password" 
              v-model="form.user_password" 
              placeholder="输入账号密码"
            >
               <template #prepend><i class="iconfont icon-lock"/></template>
            </el-input>
          </el-form-item>
          <!-- <el-form-item prop="checkNum" class="speacial">
            <el-input v-model="form.checkNum" placeholder="输入验证码">
              <template #prepend>验证码</template>
            </el-input>
            <img ref="code" class="codeImg" :src="code" alt="" @click="handleChangeImg">
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="handleLogin">登 录</el-button>
          </el-form-item>
        </el-form>
        <el-form
          ref="changeForm" 
          :model="changeform"
          :rules="changerules" 
          status-icon
          @keyup.enter.native="()=>{return;}"
          v-else
          >
          <el-form-item prop="user_name">
            <el-input v-model="changeform.user_name" placeholder="输入手机号/邮箱">
              <template #prepend><i class="iconfont icon-user1"/></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="user_phone">
            <el-input v-model="changeform.user_phone"  placeholder="输入账号原密码">
               <template #prepend><i class="iconfont icon-lock"/></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="user_password">
            <el-input  type="password" v-model="changeform.user_password"  placeholder="输入账号新密码">
               <template #prepend><i class="iconfont icon-lock"/></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handlePassword">提 交</el-button>
          </el-form-item>
        </el-form>
        <div class="login-other">
          <div>
            <!-- <span @click="handleChangePassword">{{showChange}}</span> -->
            <router-link  to="/register" target="_blank">免费注册</router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { checkSpecificKey } from '@/utils/function';
import { mapActions, mapState } from 'vuex';

export default {
  name: '' ,
  components: {
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      codeError: state => state.user.codeError
    })
  },
  data() {
    const checkNum = (rule ,value, callback) => {
      if (!value) {
        return callback(new Error('验证码为空'));
      }else if(value !== '111'){
         return callback(new Error('验证码错误'));
      }else{
        callback();
      }
    };
    const checkname = (rule ,value, callback) => {
      if(!checkSpecificKey(value)){
        return callback(new Error('账号不能含有特殊字符'));
      }else{
        callback();
      }
    }
    return {
      logoUrl: require('@/assets/logo.png'),
      form: {
        user_name: '',
        user_password: '',
      },
      rules: {
        //数组里一个对象对应套规则(包括检验内容,提示语)
        user_name: [
          { required: true, message: '请输入您的账号', trigger: 'change' },
          { validator: checkname, trigger: 'change' },
        ],
        user_password: [
          { required: true, message: '请输入密码', trigger: 'change' },
        ],
      },
      changeform: {
        user_name: '',
        user_password: '',
        user_phone: ''
      },
      changerules: {
        user_name: [
          { required: true, message: '请输入您的账号', trigger: 'change' },
        ],
        user_phone: [
          { required: true, message: '请输入您的手机号', trigger: 'change' },
        ],
        user_password: [
          { required: true, message: '请输入您的新密码', trigger: 'change' },
        ],
      },
      code: '',
      showChange: '忘记密码'
    };
  },
  methods: {
    ...mapActions({
      fetchLogin: 'user/fetchLogin'
    }),
    handleLogin(){
      this.$refs.loginForm.validate((valid) => {
        if(valid){
          this.fetchLogin({
            user_name: this.form.user_name, 
            user_password: this.form.user_password
          })
        }else{
          return false;
        }
      })
    },
    handleChangeImg(){
     this.code =`${this.code}?${Math.random()}`;
    },
    handleChangePassword(){
      this.showChange = this.showChange === '密码登录' ? '忘记密码' : '密码登录';
    },
    handlePassword(){

    }
  },
}
</script>
<style lang='scss' scoped src="./index.scss"/>
<style lang="scss">
  .modal{
    .el-form-item{
      margin-bottom: 30px;
      text-align: center;
      .el-button{
        width: 100%;
        background-color: #32aefd!important;
      }
    }
    .speacial{
      .el-form-item__content{
        .el-input-group{
          width: 73%;
        }
        .codeImg{
          width: 27%;
          vertical-align: middle;
          cursor: pointer;
        }
      }
  
    }
    .el-input-group{
      width: 400px;
    }
    .el-input-group__append, .el-input-group__prepend{
      border-radius: unset;
      color: #32aefd;
      i{
        font-size: 20px;
      }
    }
    .el-form-item__error{
      width: 100%;
      display: inline-block;
      font-size: 16px;
      text-align: right;
    }
    .el-input__suffix{
      font-size: 20px;
      color: #32aefd;
    }
  }
</style>